<template>
  <div style="margin: 0 auto; width: 100%" v-title data-title="商品预览">
    <el-container class="allc">
      <!--页面主体区域-->
      <el-container>
        <!--主内容区域-->
        <el-main class="main" style="overflow: visible">
          <!-- 第一部分：商品的简介 -->
          <div class="showGood1">
            <div class="pic">
              <img :src="this.goodList.imageURL" height="290px" width="83%" />
            </div>
            <div class="show">
              <div
                style="
                  font-size: 16px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  font-weight: 700;
                  line-height: 22px;
                "
              >
                {{ this.goodList.name }}
                <el-button
                  type="danger"
                  icon="el-icon-warning"
                  size="mini"
                  round
                  style="float: right"
                  disabled
                >
                  举报
                </el-button>
              </div>
              <div
                style="
                  margin: 8px;
                  font-size: 12px;
                  line-height: 16px;
                  color: #333;
                "
              >
                <span>{{ this.goodList.author }}著/</span>
                <span>{{ this.goodList.translator }}译；</span>
                <span
                  >{{ this.goodList.pressHorse
                  }}{{ this.goodList.publicationDate }}出品/</span
                >
                <span>{{ this.goodList.updateDate }}更新/</span>
                <span>{{ this.goodList.category }}</span>
              </div>
              <div class="price">
                <div style="margin: 10px">
                  售价&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="color: #8c222c; font-size: 22px; font-weight: 700"
                    >￥{{ this.goodList.price }}</span
                  >
                </div>
                <div style="margin: 10px">
                  品相&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="color: #bf7f5f；font-size: 18px"
                    >{{ this.goodList.appearance }}</span
                  >
                </div>
              </div>
              <div
                style="
                  font-size: 12px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  font-weight: 400;
                  line-height: 22px;
                  color: #999;
                "
              >
                <span>版本:{{ this.goodList.version }}</span>
                &nbsp; &nbsp;
                <span>更新于"{{ this.goodList.updateDate }}"</span>
                &nbsp;&nbsp;
                <span>浏览次数：{{ this.goodList.viewCount }}次</span>
              </div>
              <hr style="color: #999" />
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  line-height: 22px;
                "
              >
                <span>
                  数量：
                  <el-input-number
                    v-model="num"
                    :min="1"
                    :max="this.goodList.store"
                    label="商品数量"
                    size="mini"
                    disabled
                  >
                  </el-input-number>
                </span>
                &nbsp; &nbsp;
                <span style="font-weight: 400; font-size: 14px; color: #999"
                  >库存：{{ this.goodList.store }}</span
                >
              </div>
              <br />
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  line-height: 22px;
                "
              >
                <el-button
                  @click="addToShoppingCar(goodId, userId, num)"
                  type="danger"
                  icon="el-icon-shopping-cart-2"
                  plain
                  disabled
                >
                  加入购物车
                </el-button>
                <el-button
                  type="primary"
                  @click="buy(num)"
                  icon="el-icon-shopping-bag-1"
                  plain
                  disabled
                >
                  购买
                </el-button>
                <el-button
                  type="warning"
                  :icon="ifCollection"
                  @click="ifCollectionThis()"
                  size="mini"
                  plain
                  disabled
                  style="float: right"
                >
                  {{ this.ifCollection2 }}
                </el-button>
              </div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <!-- 卖家 -->
            <div class="sell">
              <div style="text-align: center">
                <img :src="this.seList.imageURL" height="80px" width="80px" />
              </div>
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  line-height: 22px;
                  background-color: white;
                  height: 45px;
                "
              >
                <div style="color: #999; margin: 10px">
                  昵称:&nbsp;&nbsp;{{ this.seList.nickname }}
                </div>
              </div>
              <div style="text-align: center; padding: 10px">
                <el-button
                  :type="this.onlineState"
                  icon="el-icon-chat-line-round"
                  plain
                  disabled
                >
                  联系卖家
                </el-button>
              </div>
            </div>
          </div>
          <div style="background-color: white; width: 100%">
            <!-- 下侧大区域 -->
            <!-- 左侧区域 -->
            <div class="leftPlace">
              <el-menu class="el-menu-vertical-demo" text-color="black">
                <el-menu-item index="0" disabled style="line-height: 32px">
                  <i class="el-icon-document"></i>
                  <span slot="title" style="color: black">图书种类</span>
                </el-menu-item>
                <el-popover
                  :index="classg.id + ' '"
                  v-for="classg in menuList"
                  :key="classg.id"
                  placement="right-start"
                  trigger="hover"
                  :close-delay="zero"
                >
                  <div style="width: 500px">
                    <h3>{{ classg.name }}</h3>
                    <hr />
                    <span
                      :index="item.id + ' '"
                      v-for="item in classg.subList"
                      :key="item.id"
                      @click="goSerch(item.name)"
                    >
                      {{ item.name }} |
                    </span>
                  </div>
                  <el-menu-item
                    slot="reference"
                    :index="classg.id + ' '"
                    style="font-size: 14px; line-height: 32px"
                  >
                    {{ classg.name }} ></el-menu-item
                  >
                  <!-- <el-button slot="reference">{{ classg.name }}</el-button> -->
                </el-popover>
              </el-menu>
            </div>
            <!-- 右侧区域 -->
            <div class="rightPlace">
              <!-- 上侧区域：详细内容和评论 -->
              <div class="top">
                <el-tabs type="border-card">
                  <el-tab-pane label="商品详情" style="">
                    <div class="showGood2" style="min-height: 300px">
                      <div class="goodOtherInf">
                        <div
                          style="
                            font-size: 16px;
                            text-align: left;
                            margin: 8px;
                            margin-left: 0px;
                            font-family: '微软雅黑';
                            font-weight: 700;
                            line-height: 22px;
                          "
                        >
                          商品描述：
                        </div>
                        <div>{{ this.goodList.describe }}</div>
                        <hr />
                        <div
                          v-for="it in this.goodList.moreImagesURL"
                          :key="it"
                          style="
                            text-align: center;
                            display: inline-block;
                            vertical-align: middle;
                            margin: 8px;
                            height: 220px;
                            width: 220px;
                            border: 1px solid #ddd;
                            padding: 2px;
                          "
                        >
                          <div>
                            <img
                              :src="it"
                              style="height: 200px; width: 200px"
                            />
                          </div>
                        </div>
                        <div v-show="fileNum < 5 && goodList.status != 1">
                          <addMorePic
                            :goodId="this.goodId"
                            :fileNum="this.fileNum"
                          />
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import base from "../../api/base.js";
import { mapState } from "vuex";
import addMorePic from "../../components/MyGoodPage/AddMorePic.vue";
import api from "../../api";
export default {
  components: {
    addMorePic,
  },
  created() {
    this.goodId = this.$route.query.goodId;
    this.userId = this.user.userId;
    this.getGoodDetail(this.userId, this.goodId);
    this.getAllCategories();
    this.seList.id = this.userId;
    this.seList.imageURL = base.baseUrl + this.user.imageURL;
    this.seList.nickname = this.user.nickname;
  },
  data() {
    return {
      fileNum: 0,
      zero: 0,
      onlineState: "success",
      onlineChat: "离线留言",
      online: "离线",
      value: 3.8, //评分，暂时的
      ifCollection: "el-icon-star-off",
      ifCollection2: "收藏",
      userId: "", //用户id
      goodId: "", //商品id
      num: 1, //选择商品的数量
      seList: [], //卖家信息
      goodList: [], //商品列表
      writer: [],
      menuList: [], //类别
    };
  },
  computed: {
    ...mapState("login", ["user"]),
  },
  methods: {
    getGoodDetail(userId, goodId) {
      //获得商品的信息
      this.$http
        .get(base.baseUrl + "/seller/getMyGoodDetail", {
          params: { userId: userId, goodId: goodId },
        })
        .then((res) => {
          this.goodList = res.data;
          this.goodList.imageURL = base.baseUrl + this.goodList.imageURL;
          for (var i = 0; i < this.goodList.moreImagesURL.length; i++) {
            this.goodList.moreImagesURL[i] =
              base.baseUrl + this.goodList.moreImagesURL[i];
          }
          console.log(this.goodList);
          this.fileNum = this.goodList.moreImagesURL.length;
        });
    },
    getAllCategories() {
      this.$http.get(base.baseUrl + "/getAllCategories").then((res) => {
        this.menuList = res.data;
      });
    },
  },
};
</script>

<style scoped>
.top {
  text-align: center;
  margin-top: 10px;
}
.leftPlace {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  margin: 20px 0.6% 10px -2.4%;
}
.rightPlace {
  vertical-align: top;
  display: inline-block;
  width: 66%;
  margin: 10px 0.6% 10px 0.6%;
}
.price {
  font-size: 12px;
  text-align: left;
  margin-top: 8px;
  font-family: "幼圆";
  font-weight: 400;
  color: #999;
  line-height: 20px;
  background-color: #f2f1ea;
  height: 70px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.logoAndSerch {
  height: 80px;
  width: 100%;
  background-color: #f2f1ea;
  padding: 10px;
  text-align: left;
}
.findPosition {
  height: 100px;
  width: 70%;
  vertical-align: middle;
  margin: -20px 130px 0px 470px;
  padding: 30px;
  text-align: center;
}
.allc {
  height: -webkit-fill-available;
}
.main {
  right: 0;
  background-color: white;
  width: 1100px;
}
.showGood1 {
  background-color: white;
  text-align: left;
  height: 400px;
  width: 100%;
}
.showGood2 {
  text-align: left;
  border: 1px solid #ddd;
  background-color: white;
  width: 95%;
  margin: 0 auto;
}
.goodOtherInf {
  text-align: left;
  margin: 15px;
  height: 500px;
  overflow: auto;
}
.showGood3 {
  text-align: left;
  border: 1px solid #fbffcd;
  background-color: white;
  width: 1000px;
  margin: 10px 280px;
  padding: 20px;
}
.sell {
  border: 1px solid #e5e5e5;
  border-top: 2px solid #97a69c;
  background-color: #fafafa;
  display: inline-block;
  height: 210px;
  width: 14%;
  margin-left: 3%;
  font-family: "幼圆";
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
.pic {
  height: 300px;
  width: 20%;
  display: inline-block;
  margin: 35px 0.6% 15px 9.8%;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
}
.show {
  height: 300px;
  width: 40%;
  display: inline-block;
  margin: 35px 0.6% 15px 2.6%;
  vertical-align: middle;
}
.showGoods {
  border: 1px solid #ddd;
  margin-top: 25px;
  /* float:inherit; */
  text-align: center;
  padding-bottom: 10px;
  background-color: white;
  display: inline-block;
  width: 100%;
}
.goods {
  margin: 3px 3.3%;
  height: 215px;
  width: 18%;
  text-align: center;
  border: 1px solid #ddd;
  float: left;
  background-color: snow;
  box-shadow: 2px 2px 5px #909090;
  font-family: "幼圆";
}
.goods:hover {
  box-shadow: 3px 3px 10px #909090;
}
.goodInf {
  margin-top: 8px;
  background-color: white;
  text-align: left;
  padding: 3.3%;
  line-height: 20px;
}
.el-menu-item.is-active {
  color: black;
}
.el-menu-item {
  height: 32px;
  border-top: 1px solid #ddd;
  border-collapse: collapse;
  font-family: "幼圆";
}
.el-menu-vertical-demo {
  width: 73%;
  border: 1px solid #ddd;
  border-collapse: collapse;
  margin-left: 70px;
}
.el-divider--vertical {
  height: 345px;
  margin-left: 2%;
}
</style>